<template>
  <div>
    <BreakSpace label="基本信息" :containerStyle="{ marginBottom: '15px' }" />
    <FormPanel
      ref="formPanel"
      :list="formList"
      labelWidth="100"
      :formType="type"
      :isSubmitBtn="false"
      @formChange="formChangeHandle"
    />
    <el-upload
      ref="upload"
      class="importPrice"
      :action="url"
      accept=".xlsx, .xls"
      :limit="1"
      :headers="headersObj"
      :on-success="showErrorList"
      :on-exceed="handleExceed"
      :data="uploadData"
      :before-upload="beforeUploadFile"
    >
      <div style="text-align: left;">
        <multiuse-button size="small" type="primary" plain>点击上传</multiuse-button>
        <div style="marginbottom: 5px;padding-top: 1rem;">
          <p>
            点击“
            <span style="color: red">选择</span>”按钮，选择要导入的xls文件。
          </p>
        </div>
      </div>
    </el-upload>
    <div style="padding-top: 3rem"></div>
    <BreakSpace label="错误信息" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="table"
      :columns="columns"
      :dataSource="dataList"
      :datakey="'records'"
      :onColumnsChange="columns => (this.columns = columns)"
      :isPagination="false"
      :isSelectColumn="false"
      height="auto"
      :is-select-column="false"
    >
    </FilterTable>
    <div style="padding-top: 3rem"></div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <multiuse-button @click="closeDia">关 闭</multiuse-button>
    </div>
  </div>
</template>
<script>
import { getToken, getAppId, getUserId } from '@/assets/js/auth';
import { downloadModel } from '@/api/claim/factory/CheckSheetMaintain';
import { exportExcelFile } from '@/utils';
import { dictionary } from '@/utils/dictMixin';
import { getPart } from '@/api/dictionary/index';
export default {
  props: ['url'],
  mixins: [dictionary],
  // 获取审批单ID
  data() {
    return {
      headersObj: {
        jwt: getToken(),
        appId: getAppId(),
        userId: getUserId(),
        userAgent: 'pc',
      },
      errorList: [],
      exportLoading: false,
      formList:this.createFormList(),
      columns: this.creatHeader(),
      dataList: [],
      type: false,
      uploadData:{
        typeId:'',
        modelType:'',
        operationType:'',
        salesYear:'',
      }
    };
  },
  async created() {
    const res = await getPart();
    if (res.resultCode == 200) {
      this.formList.find(x => x.fieldName == 'typeId').itemList = res.data.map(y => ({ text: y.name, value: y.code }));
    }
  },
  methods: {
    downloadTemplate() {
      this.$confirm('此操作将下载excel模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.exportLoading = true;
        downloadModel().then((res) => {
          console.log(res);
          exportExcelFile(res.data, '考核单导入模板');
          this.exportLoading = false;
        });
      });
    },
    showErrorList(response, file, fileList) {
      if (response.resultCode === 200) {
        this.dataList = response.data;
        console.log("hhhhhh",response.data)
        this.type = true;
        if(!this.dataList){
          this.$notify.success({ title: '提示信息', message: '导入完成!' });
          this.closeDialog();
        } else if (response.data.length === 0) {
          this.$notify.success({ title: '提示信息', message: '导入完成!' });
          this.closeDialog();
        } else {
          this.$notify.warning({title: '提示信息', message: '导入失败,错误信息如下!'});
        }
      } else {
        this.$notify.error({ title: '提示信息', message: response.errMsg });
      }
    },
    closeDialog() {
      console.log(this.type);
      if(this.type){
        this.$emit('importclose');
      }else{
        this.$emit('close');
      }
    },
    closeDia(){
      this.$emit('close');
    },
    handleExceed(files, fileList) {
      this.$message(`只能选择一个文件`);
    },
    formChangeHandle(val){
      this.saveData = val;
    },
    beforeUploadFile(){
      this.$refs.formPanel.SUBMIT_FORM();
      if(this.saveData){
        this.uploadData.typeId = this.saveData.typeId;
        this.uploadData.modelType = this.saveData.modelType;
        this.uploadData.operationType = this.saveData.operationType;
        this.uploadData.salesYear = this.saveData.salesYear;
      }else{
        return false;
      }

    },
    //table表头和数据源
    creatHeader() {
      return [
        { title: '错误行数', dataIndex: 'row', sorter: true },
        { title: '错误信息', dataIndex: 'errorMsg', sorter: true },
      ];
    },
    createFormList() {
      return [
        {
          type: 'SELECT',
          label: '配件类型',
          fieldName: 'typeId',
          placeholder: '请选择',
          initialValue: '',
          rules: [{ required: true, message: '请选择配件类型...', trigger: 'change' }],
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '动力形式',
          fieldName: 'modelType',
          placeholder: '请选择',
          initialValue: '',
          rules: [{required: true, message: '请选择动力形式...', trigger: 'change'}],
          itemList: this.createDictList('5543'),
          change: val => {
            this.formList.find(x => x.fieldName == 'salesYear').initialValue = '';
            if (val == 55431002) {
              console.log("1")
              this.formList.find(x => x.fieldName == 'salesYear').rules[0].required = true;
              this.formList.find(x => x.fieldName == 'salesYear').disabled = false;
              this.formList.find(x => x.fieldName == 'operationType').initialValue = '';
              this.formList.find(x => x.fieldName == 'operationType').itemList = this.createDictList('5584',[55841001,55841002]);
            }else if (val == 55431001){
              this.formList.find(x => x.fieldName == 'salesYear').rules[0].required = false;
              this.formList.find(x => x.fieldName == 'salesYear').disabled = true;
              this.formList.find(x => x.fieldName == 'operationType').initialValue = '';
              this.formList.find(x => x.fieldName == 'operationType').itemList =this.createDictList('5584',[55841003,55841004]);
            }
          }
        },
        {
          type: 'SELECT',
          label: '营运类型',
          fieldName: 'operationType',
          placeholder: '请选择',
          initialValue: '',
          rules: [{ required: true, message: '请选择营运类型...', trigger: 'change' }],
          itemList: [],
        },
        {
          type: 'DATE',
          label: '销售年份',
          fieldName: 'salesYear',
          placeholder: '请输入电车保修年份...',
          dateType: 'year',
          initialValue: '',
          valueFormat: 'yyyy',
          disabled:true,
          rules: [{ required: true, message: '请选择销售年份...', trigger: 'change' }],
          unitRender: () => {
            return <span>(年)</span>;
          }
        },
      ]
    },
  },
};
</script>
<style lang="less" scoped></style>>
